<template>
  <el-dialog :visible.sync="show" title="答疑详情" width="700px">
    <div class="anwser_height">
      <div class="questionbox">
        <div class="qus">
          <img class="qusicon" src="../../assets/qusicon.png" />
          <span class="question">{{ detail.question }}</span>
        </div>
        <div class="timebox">
          <span class="username">{{ username }}</span>
          <span class="span-line">|</span>
          <span class="username">{{ $parseDate(detail.createTime) }}</span>
        </div>
      </div>

      <div v-for="(item, index) in comments" :key="index" :gutter="24" class="">
        <div class="answerbox">
          <div class="qus">
            <div class="ansicon">{{ item.firstname }}</div>
            <span class="question">{{ item.comment }}</span>
          </div>
          <div class="timebox">
            <span class="username">{{ item.username }}</span>
            <span class="span-line">|</span>
            <span class="username">{{ $parseDate(item.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-input v-model="comment"></el-input>
      <el-button
        type="primary"
        :disabled="comment === ''"
        @click="addComments()"
        >添加评论</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import QApi from '../../api/Question.js'
export default {
  props: {
    visible: Boolean,
    id: Number,
    username: String
  },
  data() {
    return {
      show: false,
      comment: '',
      comments: [],
      detail: {
        username: null,
        question: null,
        createTime: null
      }
    }
  },
  watch: {
    visible: function(val) {
      this.show = val
      this.comment = ''
      this.comments = this.detail.comments
    },
    show: function(val) {
      this.$emit('update:visible', val)
    },
    id: function() {
      this.loadComments()
    }
  },
  methods: {
    addComments() {
      let username = this.$store.state.user.username
      //   window.console.log(this.$store.state.user)
      //   window.console.log(id)
      let payload = {
        questionId: this.id,
        username: username,
        comment: this.comment
      }
      this.axios.post(QApi.addComment, payload).then(res => {
        if (res.data.status === 0) {
          this.loadComments()
          this.comment = ''
        }
      })
    },
    loadComments() {
      this.axios
        .get(QApi.findCommentsById, { params: { id: this.id } })
        .then(res => {
          if (res.data.status === 0) {
            this.comments = res.data.data[0].comments
            for (var index in this.comments) {
              window.console.log(index)
              this.comments[index].firstname = this.comments[
                index
              ].username.substr(0, 1)
            }
            window.console.log(this.comments)
            this.detail = res.data.data[0]
            window.console.log(res.data.data[0])
          }
        })
    }
  }
}
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0 !important;
  padding-bottom: 0;
}
.anwser_height {
  height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.questionbox {
  padding: 15px 15px;
  border: 1px solid #e4e4e4;
  background: url(../../assets/q_title.png) repeat-x;
  border-radius: 5px;
  margin-right: 10px;
}
.qus {
  display: flex;
}
.qusicon {
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.question {
  font-size: 16px;
  line-height: 32px;
  text-indent: 0;
  width: 559px;
}
.questionbox .qus .question {
  font-weight: bold;
}
.username {
  color: #134ba0;
}
.span-line {
  margin-left: 8px;
  margin-right: 8px;
  color: #999999;
}
.timebox {
  margin-top: 10px;
  padding-left: 42px;
}
.answerbox {
  padding: 15px 15px;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 10px;
}
.footer {
  display: flex;
  margin-top: 20px;
}
.ansicon {
  display: block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  line-height: 32px;
}
</style>
